<html>
<head>
	<script src="jquery.min.js"></script>
	<script src="highcharts.js"></script>
	<script src="cc.js"></script>
  <script>
$(document).ready(function() {
   var chart = new Highcharts.Chart({
      chart: {
         renderTo: 'container',
         defaultSeriesType: 'scatter',
         zoomType: 'xy'
      },
      title: {
         text: 'Churn vs Complexity'
      },
      xAxis: {
         title: {
            enabled: true,
            text: 'Churn'
         },
         startOnTick: false,
         endOnTick: false,
         labels: {enabled:false},
         lineWidth: 0,
         tickWidth: 0
      },
      yAxis: {
         title: {
            text: 'Complexity'
          },
         startOnTick: false,
         endOnTick: false,
         labels: {enabled:false}
      },
      tooltip: {
        formatter: function() {
          var item = this.point;
          return item.filename + "<br/>" + "churn: " + item.x + "<br/>" + "complexity: " + item.y;
        }
      },

      plotOptions: {
         scatter: {
            marker: {
               radius: 5,
               states: {
                  hover: {
                     enabled: true,
                     lineColor: 'rgb(100,100,100)'
                  }
               }
            },
            states: {
               hover: {
                  marker: {
                     enabled: false
                  }
               }
            }
         }
      }
   });

   $.each(directorySeries, function(directory) {
     chart.addSeries({
      name: directory,
      type: 'scatter',
      visible: true,
      data: directorySeries[directory]
     });
   });
});

  </script>
</head>
<body>
	<div id='container'>
	</div>
	</body>
</html>
